// 主题色
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;

// 文字颜色
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #C0C4CC;

// 边框颜色
$border-color-base: #DCDFE6;
$border-color-light: #E4E7ED;
$border-color-lighter: #EBEEF5;
$border-color-extra-light: #F2F6FC;

// 背景颜色
$background-color-base: #F5F7FA;
$background-color-light: #FAFAFA;

// 字体大小
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

// 边框圆角
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-large: 8px;
$border-radius-circle: 50%;

// 间距
$spacing-mini: 4px;
$spacing-small: 8px;
$spacing-base: 12px;
$spacing-large: 16px;
$spacing-extra-large: 24px;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);

// 断点
$breakpoint-xs: 576px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1920px;

// 过渡
$transition-all: all .3s cubic-bezier(.645,.045,.355,1);
$transition-fade: opacity .3s cubic-bezier(.645,.045,.355,1);
$transition-base: .3s cubic-bezier(.645,.045,.355,1);

// 布局
$header-height: 60px;
$footer-height: 60px;
$sidebar-width: 240px;

// z-index
$z-index-normal: 1;
$z-index-dropdown: 10;
$z-index-sticky: 20;
$z-index-fixed: 30;
$z-index-modal-mask: 40;
$z-index-modal: 50;
$z-index-popover: 60;
$z-index-tooltip: 70;
$z-index-notification: 80;

// Mixins
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin multi-ellipsis($line: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $breakpoint-xs) { @content; }
  }
  @else if $breakpoint == sm {
    @media (max-width: $breakpoint-sm) { @content; }
  }
  @else if $breakpoint == md {
    @media (max-width: $breakpoint-md) { @content; }
  }
  @else if $breakpoint == lg {
    @media (max-width: $breakpoint-lg) { @content; }
  }
  @else if $breakpoint == xl {
    @media (max-width: $breakpoint-xl) { @content; }
  }
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin hover-focus {
  &:hover,
  &:focus {
    @content;
  }
} 